@charset "utf-8";
.games-box {
    .hot {
        background-image: url(../img/games/boy.png);
        background-repeat: no-repeat;
        background-position: top 41px left 0;
        .hot-text {
            padding: 0;
            margin-top: 33px;
            h3 {
                font-size: 30px;
                color: #2a2a2a;
                margin: 0;
                text-align: right;
                padding-right: 15px;
                margin-bottom: 20px;
            }
            span {
                font-size: 14px;
                color: #898989;
                text-indent: 2em;
                display: inline-block;
                line-height: 2em;
            }
        }
        .hot-content {
            padding: 0;
            margin-top: 15px;
            clear: both;
            .hot-img {
                width: 42%;
                height: 133px;
                float: left;
                margin: 0 8% 0 2%;
                img {
                    width: 100%;
                }
            }
            .hot-img:nth-of-type(2) {
                margin-right: 0;
            }
        }
    }
    .master {
        background-image: url(../img/games/girl.png);
        background-repeat: no-repeat;
        background-position: top 41px right 0;
        margin-bottom: 50px;
        .master-text {
            padding: 0;
            margin-top: 33px;
            h3 {
                font-size: 30px;
                color: #2a2a2a;
                margin: 0;
                padding-right: 15px;
                margin-bottom: 20px;
            }
            span {
                font-size: 14px;
                color: #898989;
                text-indent: 2em;
                display: inline-block;
                line-height: 2em;
            }
        }
        .master-content {
            padding: 0;
            margin-top: 15px;
            clear: both;
            .master-img {
                width: 42%;
                height: 133px;
                float: left;
                margin: 0 8% 0 2%;
                img {
                    width: 100%;
                }
            }
            .master-img:nth-of-type(2) {
                margin-right: 0;
            }
        }
    }
    .case-box {
        clear: both;
        h3 {
            margin: 0 auto 38px;
        }
        .case-content {
            margin-bottom: 15px;
            float: left;
            width: 30%;
            margin-left: 1%;
            margin-right: 2%;
            p {
                text-align: center;
                font-size: 14px;
                color: #2a2a2a;
                margin: 12px auto 0;
            }
            .case-img {
                position: relative;
                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #2c1822;
                    color: white;
                    opacity: 0.8;
                    display: none;
                    span {
                        display: inline-block;
                        text-indent: 2em;
                        font-size: 14px;
                        line-height: 2em;
                        text-align: justify;
                    }
                }
                &:hover .mask {
                    display: block
                }
                width: 100%;
                img {
                    max-width: 100%;
                }
            }
        }
    }
}

@media only screen and (max-width:768px) {
    .games-box .master {
        background-size: 234px 340px;
        background-position: top 100px right 0;
    }
}
@media only screen and(min-width:0) and (max-width:415px) {
    .games-box .master{
        color: pink;
        background: none;
        
    }
    .games-box .master .master-text h3{
        text-align: center;
        
    }
    .games-box .hot .hot-text h3{
        text-align: center;
    }
    .games-box .hot{
         background: none;
    }
    .games-box .master .master-content .master-img{
        height: 75px;
    }
    .games-box .hot .hot-content .hot-img{
        height: 75px;
    }
    .games-box .master{
        margin-bottom: 0px;
    }
}